<template>
    <div class="dayin">
        <el-button type="primary" @click="print()" class="dayin_btn">打印预览</el-button>
        <h3 style="text-align: center;">{{ Infomation.company_name }}</h3>
        <div ref="print" id="printArea">
           
            <div class="wai" v-for="(item, index) in dayinlist" :key="index">
                
                <div class="nei">
                    <table style="border-collapse: collapse" cellspacing="0">
                        <tr>
                            <td colspan="10">
                                <div class="top">
                                    <div class="left">
                                        <div class="name">
                                            {{ Infomation.for_short }}
                                        </div>
                                        <span>客户名称：{{ item.customer.customer_name }}</span>
                                        <span>客户地址：{{ item.customer.customer_address }}</span>
                                        <span>物流公司：{{ item.customer.logistics }}</span>
                                    </div>
                                    <div class="right">
                                        <span>NO:{{ item.order_number }}</span>
                                        <span>{{ Infomation.for_short }}订货单</span>
                                        <span>地址：{{ Infomation.address }}</span>
                                        <span>服务热线：{{ Infomation.phone }}</span>
                                        <span>订货日期：{{ formatterTime(item.order_date) }}</span>
                                        <span>送货日期：{{ formatterTime(item.delivery_date) }}</span>
                                        <span>业务手机员：{{ item.account_executive.phone }}</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td><span class="ch">订单号</span><span class="en">ORDER NO</span> </td>
                            <td><span class="ch">型号</span><span class="en">MODEL</span> </td>
                            <td><span class="ch">规格</span><span class="en">SIZE</span> </td>
                            <td><span class="ch">颜色</span><span class="en">COLOR</span> </td>
                            <td><span class="ch">单价</span><span class="en">PRICE</span> </td>
                            <td><span class="ch">件数</span><span class="en">QUANTITY</span> </td>
                            <td><span class="ch">折扣</span><span class="en">FOLD</span> </td>
                            <td><span class="ch">礼包</span><span class="en">BREAKS</span> </td>
                            <td><span class="ch">金额</span><span class="en">AMOUNT</span> </td>
                            <td><span class="ch">尺寸</span><span class="en">SIZE</span> </td>
                        </tr>
                        <tr>
                            <td>{{ item.order_number }}</td>
                            <td>{{ item.model_number ? item.model_number.model_number : '' }}</td>
                            <td>{{ item.specification ? item.specification.specification : '' }}</td>
                            <td>{{ item.color ? item.color.color : '' }}</td>
                            <td>{{ item.receivables }}</td>
                            <td>{{ item.models_field.cases_num }}</td>
                            <td>{{ item.models_field.discount }}%</td>
                            <td></td>
                            <td>{{ item.receivables }}</td>
                            <td>{{ item.models_field.size }}</td>
                        </tr>
                        <tr>
                            <td>
                                合计
                            </td>
                            <td colspan="4">
                                {{ Number(item.receivables) * (Number(item.models_field.discount) / 100) }}
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="10" style='text-align:left;'>
                                预付定金:{{ item.received }}
                            </td>
                        </tr>
                        <tr>
                            <td colspan="10" style='text-align:left;'>
                                备注:{{ item.remark }}
                            </td>
                        </tr>
                        <tr>
                            <td colspan="10"  style='text-align:left;'>
                                    <p>1.订单经双方确认后不得退款退货在没付清货款前本单货品仍属于卖方。</p>
                                    <p>2.买方付齐全额后售方安排供货.买方收到货后应当场验收产品。</p>
                                    <p>3.买方收货后,因运输而造成的损坏,卖方概不负责。</p>
                                    <p> 4.买方在预定出货日期15天内不提货的,卖方有权将收买方货物的仓租金或处理定货产品。</p>
                            </td>
                        </tr>
                    </table>
                    <div class="bott">
                        <span>制单员:{{ item.account_executive.company_name }}</span>
                        <span>业务员:{{ item.account_executive.company_name }}</span>
                        <span>区域经理:{{ item.models_field.regional_managers }}</span>
                        <span>客户确认</span>

                    </div>
                </div>
                <div style="page-break-after: always"></div>
            </div>
          
        </div>
    </div>
</template>
<script>
import vueQr from "vue-qr";

import { getInfomationList } from "@/api/user.js";
export default {
    components: {
        vueQr,
    },
    data() {
        return {
            dayinlist: [],
            Infomation: {},
        };
    },
    mounted() {
        this.dayinlist = JSON.parse(this.$route.query.data);
        console.log(this.dayinlist);
        this.get_InfomationList()
    },
    methods: {
        get_InfomationList() {
            getInfomationList().then(res => {
                if (res.code == 200) {
                    this.Infomation = res.data
                }
            })
        },
        formatterTime(data) {
            return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
        },
        print() {
            this.$print(this.$refs.print);
        },
    },
};
</script>
<style scoped>
#printArea {
    width: 100%;
    margin: 0 auto;
}

#printArea table {
    width: 100%;
    margin: 0 auto;
}

#printArea table td {
    border: 1px solid #000;
    height: 50px;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-word;
}

.top {
    display: flex;
    justify-content: space-around;
}

.top div {
    width: 50%;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
}

.top span {
    display: block;
    margin-top: 5px;
}

.en,
.ch {
    display: block;
}

.ch {
    font-size: 16px;
}

.en {
    font-size: 14px;
}

.bott {
    display: flex;
    margin-top: 15px;
    justify-content: space-around;
}

.bott span:last-child {
    margin-right: 100px;
}

.left .logo {
    width: 100px;
    height: 40px;
    border: 1px solid #000;
}

.left .name {
    width: fit-content;
    height: 40px;
    /* border:1px solid #000; */
    margin-top: 5px;
}

@media print {
    #printArea {
        width: 100%;
        margin: 0 auto;
    }

    #printArea table {
        width: 100%;
        margin: 0 auto;
    }

    #printArea table td {
        border: 1px solid #000;
        height: 50px;
        text-align: center;
        padding: 5px;
        box-sizing: border-box;
        word-wrap: break-word;
        word-break: break-word;
    }

    .top {
        display: flex;
        justify-content: space-around;
    }

    .top div {
        width: 50%;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
    }

    .top span {
        display: block;
        margin-top: 5px;
    }

    .en,
    .ch {
        display: block;
    }

    .ch {
        font-size: 16px;
    }

    .en {
        font-size: 14px;
    }

    .bott {
        display: flex;
        margin-top: 15px;
        justify-content: space-around;
    }

    .bott span:last-child {
        margin-right: 100px;
    }

    .left .logo {
        width: 100px;
        height: 40px;
        border: 1px solid #000;
    }

    .left .name {
        width: fit-content;
        height: 40px;
        /* border:1px solid #000; */
        margin-top: 5px;
    }
}
</style>
  